<template>
  <div id="app">
    <tao-table :persons="persons">
      <template v-slot:default="{item}">
        <button type="button" class="layui-btn layui-btn-danger" @click="deletePerson(item)">删除</button>
      </template>
    </tao-table>

    <tao-table :persons="persons">
      <template v-slot="{item}">
        <button type="button" class="layui-btn layui-btn-danger" @click="showPerson(item)">查看</button>
      </template>
    </tao-table>

  </div>
</template>
<script>
import TaoTable from "@/components/tao-table.vue";

export default {
  name: "App",
  components: {TaoTable},
  data() {
    return {
      persons: [
        {id: 1, name: "马化腾", age: 50},
        {id: 2, name: "马云", age: 60},
        {id: 3, name: "马保国", age: 80},
        {id: 4, name: "马斯克", age: 20},
        {id: 5, name: "马思维", age: 90},
      ]
    }
  },
  methods: {
    deletePerson(person) {
      const index = this.persons.findIndex(item => item.id === person.id)
      this.persons.splice(index, 1)
    },
    showPerson(person) {
      alert(`姓名是${person.name}--年龄是${person.age}`)
    }
  }

}
</script>
<style lang="less">

</style>
